跳到主要内容

Less 基本使用

Less 是什么？​

Less 是一门 CSS 预处理 语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

配置环境​

在 Node.js 环境中使用 Less ：

npm install -g less

使用以下命令将 style.less 文件编译为 style.css :

lessc style.less style.css

在浏览器环境中使用 Less ：

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

Less 嵌套规则​

.container{
  h1{
       font-size: 25px;
       color:#E45456;

       p{
       font-size: 25px;
       color:#3C7949;
    }
 }
}

Less 运算​

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

@fontSize: 10px;

.app {
 font-size: @fontSize * 2;
 color:green;
}

Less 转义（Escaping）​

转义（Escaping）允许你 使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。（不过这玩意用的场景不多，一般都是些老项目用）

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

编译为：

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

Less 混合（Mixins）​

混合（Mixin）是将一组属性从一个规则集包含（或混入）到另一个规则集的方法

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

在别的地方引入这个 .bordered 的属性

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

@规则嵌套和冒泡​

参考资料 MDN @规则 参考资料 MDN @media

@media 可以针对不同的屏幕尺寸设置不同的样式，例如下面这个：如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

在 less 的嵌套用法

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

编译为：

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

函数（Functions）​

官网：Less 的函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。

函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

命名空间​

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

现在，如果我们希望把 .button 类混合到 #header a 中，我们可以这样做：

#header a {
  color: orange;
  #bundle.button();  // 还可以书写为 #bundle > .button 形式
}

作用域（Scope）​

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

导入（Importing）​

@import "library"; // library.less
@import "typo.css";

References​